<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>书架</title>
		<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
		<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
		<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
		<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
		<link href="css/index.css" rel="stylesheet" type="text/css"/>
		<link href="css/bookshelf.css" rel="stylesheet" type="text/css"/>
		<link href="css/bookstore.css" rel="stylesheet" type="text/css"/>


		<style>
			.book-card {
				position: relative;
				width: 200px;
				height: 300px;
				margin: 10px;
				padding: 10px;
				border: 1px solid #ccc;
			}

			.menu {
				position: absolute;
				background: lightgray;
				border: 1px solid darkgray;
				padding: 5px;
				z-index: 999;
			}

			 .user-logout{
				 color: #222222;
			 }
			.user-logout:hover{
				color: orange;
			}

		</style>

	</head>
	<body>
		
		<div id="app">
			<div class="td-header" :class="{ 'is-sticky': isSticky }">
				<div class="td-header-content">
					<div class="td-header-logo">
						<img src="image/logo.png" />
						<li> 土豆小说网 </li>
					</div>
					<div class="td-header-right">
						<div class="right-shouye">
							<a href="index.html">首页</a>
							 
						</div>
						<div class="right-shouye">
							<a href="bookstore.html">书库</a>
							 
						</div>
						<div class="right-shouye">
							<a href="bookshelf.html">书架</a>
							 
						</div>
						<div class="right-shouye">
							<a href="ranking.html">排行榜</a>
							 
						</div>
						<div class="right-search">
							<input placeholder="请输入书名或作者名" v-model="selectneirou">
							<img @click="select()" style="cursor: pointer;width: 15px;height: 18px;" src="https://ziyilin.oss-cn-shanghai.aliyuncs.com/%E6%90%9C%E7%B4%A21.png" />

						</div>
						<div class="serial-divider  byte-divider byte-divider-vertical" style="margin-right: 40px;"></div>
						<div class="right-user">
							<a  v-if="!isLogged" href="login.html"> <div class="user-login">登录</div></a>
							<a v-if="!isLogged" href="login.html"><div class="user-reg">注册</div></a>
							<div v-if="isLogged" style="display: flex; align-items: center;cursor: pointer;"  >
								<el-avatar   icon="el-icon-user-solid" :src="this.user.avatar"> </el-avatar>
								<span @click="geren()"  style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px; ">{{this.user.username}} </span>
							</div>
							<div v-if="isLogged" style="display: flex; align-items: center;">
								<span    class="user-logout" @click="logout()" style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px;cursor: pointer; ">退出 </span>
							</div>

						</div>
	 
						 
					</div>
				</div>
			</div>

			<div class="bookshelf">
				<div class="bookshelf-page">
					<div class="bookshelf-page-byte">
						<el-radio-group v-model="radio1" style="background: rgba(0,0,0,.03);margin-left: 20px;  " fill=" rgba(250,103,37,.1)" size="mini" text-color="#fa6725"     >
							<el-radio-button label="全部"   style=" background: rgba(0,0,0,.03);   line-height: 24px;border-radius: 12px;"  ></el-radio-button>
							<el-radio-button label="分组"   style="background: rgba(0,0,0,.03);padding: 0 10px; line-height: 24px;border-radius: 12px;"></el-radio-button>
							<el-radio-button label="出版" style=" background: rgba(0,0,0,.03); line-height: 24px;border-radius: 12px; "></el-radio-button>

						</el-radio-group>

					</div>

					<div class="bookshelf-page-items">
						<div class="muye-show-monitor" v-for="item in bookshelf">
							<div class="book-card book-card-large"   v-on:contextmenu.prevent="showCustomMenu($event)" @click="Jump(item.chapterId)"  style="background: rgb(255, 255, 255);cursor: pointer; position: relative;">
								<div class="book-card__normal" style="opacity: 1;">
									<div class="normal-card-enter-done">
										<div class="book-cover book-cover-large">
											<div class="book-cover-quality">
												<img style="width: 100%;height: 100%;" :src="item.coverImage" alt="item.title">
											</div>

										</div>
										<div class="book-title book-title-large">{{item.title}}</div>
										<div v-if="!isbook" class="book-progress">未读过</div>
										<div v-if="isbook" class="book-progress">{{item.duji}}章/{{item.chapterNum}}章</div>
									</div>

								</div>

								<div class="menu" v-if="showMenu" style="bottom: 0; right: 0; position: absolute;">
									<div @click="handleMenuOption(item.bookshelfId)">移除书架</div>
								</div>

							</div>

						</div>

					</div>

				</div>

			</div>
		 
		</div>
		
	</body>
	
	<script>
	 
	 
	
	var v = new Vue({
		el : "#app",
		data() {
			  
		 
			 return {
				 radio1: '全部',
				 isLogged: false,
				 user:{
					 userId: '',
					 username: '',
					 avatar: '',
				 },

				 isSticky: false,
				 showMenu: false,
				 isbook: false,

				 bookshelf: [{
					 bookshelfId: '',
					 userId: '',
					 novelId: '',
					 chapterId: '',
					 title: '',
					 coverImage:'',
					 duji: '',//读到的第几章
					 chapterNum: '',//章节数
				 }],
				 selectneirou: '',



				};
			},
	    mounted() {
			window.addEventListener('scroll', this.handleScroll);
			this.iflogin();


		},
		methods: {
			handleScroll() {
				const scrollHeight = window.scrollY || document.documentElement.scrollTop;
				const threshold = 50;
	
				this.isSticky = scrollHeight > threshold;


			},
			iflogin(){
				axios.get('/user/iflogin').then(res=>{


					if(res.data != ""){
						this.user.userId = res.data;
               			axios.get('/user/getUser?userId='+this.user.userId).then(res=>{
							this.user = res.data;
						});
						this.isLogged =  true;
					}
					this.selectbookshelf();

				});

			},
			logout(){
				axios.post('/user/logout').then(res=>{
					this.isLogged = false;
					this.iflogin();
					window.location.href = "index.html";

				});

			},

			showCustomMenu(  event) {
				event.preventDefault();


				this.showMenu = true;
			},
			handleMenuOption(bookshlefId) {
				//移除书架
				axios.get('/other/deletebookshelf?bookshelfId='+bookshlefId).then(res=>{
					if(res.data == 1){
						alert("移除成功");
						this.selectbookshelf();
					}

				});

				this.showMenu = false;
			},
			//
			Jump(chapterId){


			 	this.showMenu = false;

			 	if(this.showMenu == false){
				 	window.location.href = "content.html#"+chapterId;
			 	}


			},
			selectbookshelf(){
				axios.get('/other/selectbookshelf?userId='+this.user.userId).then(res=>{
					this.bookshelf = res.data;
					this.bookshelf.forEach(item => {
						this.selectChapter(item)
					});


				});

			},
			//查询章节列表
			selectChapter(item){
				axios.get('/other/selectChapter?novelId=' + item.novelId).then(res => {
					if(res.data != null){
						item.chapterNum= res.data.length;
						res.data.forEach((chapter, index) => {
							if(chapter.chapterId == item.chapterId){
								item.duji = index+1;
							}

						});
						this.isbook = true;
					}
					else{
						this.isbook = false;
					}
					this.$forceUpdate();


				});
			},
			// 搜索
			select(){
				axios.get('/other/select/select?selectneirou='+this.selectneirou).then(res=>{
					if(res.data == "ok"){
						window.location.href = "select.html"
					}

				});

			},
			geren(){
				window.location.href = "user.html"
			},

		}
		 
		 
		 
	})
	 
	</script>
</html>
